.rank-view-wrapper{
  height: 100%;
  width: 100%;
  border:1px solid #f1f4f5;
  border-radius:5px;
  .view-title{
    height: 15%;
    width: 100%;
    background-color: #f1f4f5;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    &>span{
      font-size:.875rem;
      color:#333333;
      margin-left: 1rem;
      margin-top: auto;
      margin-bottom: auto;
    }
  }
  .view-list-wrapper{
    width: 100%;
    height: 85%;
    display: flex;
    justify-content:space-around;
    flex-direction: row;
    &>ul{
      width: 45%;
      height: 100%;
      list-style-type:none;
      padding: 0;
      margin: 0;
      >li{
        height: 18%;
        width: 95%;
        margin-bottom: 5px;
        border-bottom:1px solid #f1f4f5 ;
      }
      :last-child{
        border-bottom:none;
      }
      .li-item{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .li-item-num{
          height: 1.875rem;
          width: 1.875rem;
          line-height: 1.875rem;
          text-align: center;
          margin-top: auto;
          margin-bottom: auto;
          margin-right: .625rem;
          background: url("./icons/normal_icon.png") no-repeat 50% 50%;
          background-size: cover;
          color: #ff595f;
        }
        .li-item-name{
          height: 1.875rem;
          line-height: 1.875rem;
          margin-top: auto;
          margin-bottom: auto;
          font-size: .875rem;
          color:#666666;
        }
        .first{
          background: url("./icons/first_icon.png") no-repeat 50% 50%;
          background-size: cover;
          color: white;
        }
        .second{
          background: url("./icons/second_icon.png") no-repeat 50% 50%;
          background-size: cover;
          color: white;
        }
        .third{
          background: url("./icons/third_icon.png") no-repeat 50% 50%;
          background-size: cover;
          color: white;
        }
        .first-text{
          color: #ff3f87;
        }
        .second-text{
          color: #ff6846;
        }
        .third-text{
          color: #ffab46;
        }
      }
    }
  }
}
